<template>
  <!-- 搜索框 -->
  <div class="searchTop">
    <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
      <use xlink:href="#icon-zuojiantou"></use>
    </svg>
    <input
      type="span"
      placeholder="陈奕迅"
      v-model="guanjianci"
      @input="zhanshi"
      @keydown.enter="huiche"
    />
    <div>X</div>
  </div>
  <!-- 搜索内容展示 -->
  <div v-if="guanjianci !== ''">
    <div class="searchContent">搜索内容: {{ guanjianci }}</div>
    <div class="searchList">
      <div class="searchItem" v-for="item in liebiao" :key="item.id">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
        <span class="content">{{ item.name }}</span>
      </div>
    </div>
  </div>
  <!-- 歌曲列表  -->
  <GequLiebiao :sousuo="sousuo" />
  <!-- 历史记录 -->
  <LiShijilu
    :lishijilu="lishijilu"
    :dede="dede"
    v-if="lishijilu.length !== 0 && guanjianci == '' && sousuo.length == 0"
  />
  <!-- 热门搜索模块 -->
  <ReMeng v-if="guanjianci == '' && sousuo.length == 0" />
</template>

<script>
import LiShijilu from "@/components/search/LiShijilu.vue";
import ReMeng from "@/components/search/ReMeng.vue";
import GequLiebiao from "@/components/search/GequLiebiao.vue";
// 获取数据api   用户搜索列表
import { yonghuyupan } from "@/Api/API.js";
export default {
  data() {
    return {
      lishijilu: [], //历史记录数据
      guanjianci: "", //搜索关键词
      liebiao: [], //联想搜索列表
      sousuo: [], //搜索列表的数据
    };
  },
  mounted() {
    // 从本地缓存获取历史记录
    if (this.lishijilu.length == 0) {
      this.lishijilu = JSON.parse(localStorage.getItem("jilu")) || [];
    }
  },
  methods: {
    async huiche() {
      // 判断是否为空
      if (this.guanjianci == "") return;
      // 放到第一个
      this.lishijilu.unshift(this.guanjianci);
      localStorage.setItem("jilu", JSON.stringify(this.lishijilu));
      //数据请求
      let res = await yonghuyupan(this.guanjianci);
      this.sousuo = res.data.result.songs;
      this.guanjianci = "";
    },
    // 删除所有的历史记录
    dede() {
      localStorage.removeItem("jilu");
      this.lishijilu = [];
    },
    // 搜索列表展示
    zhanshi() {
      if (this.guanjianci == "") return;
      setTimeout(async () => {
        let res = await yonghuyupan(this.guanjianci);
        this.liebiao = res.data.result.songs;
      }, 200);
    },
  },
  components: {
    // 历史记录
    LiShijilu,
    // 热门推荐
    ReMeng,
    //搜索详情歌曲数据
    GequLiebiao,
  },
};
</script>

<style lang="less" scoped>
.searchTop {
  width: 100%;
  height: 1rem;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  .icon {
    padding: 0;
    margin: 0;
  }
  input {
    margin-left: 0.2rem;
    border: none;
    border-bottom: 1px solid #999;
    width: 90%;
    padding: 0.1rem;
  }
}
// 搜索列表展示
.searchContent {
  color: #d43c33;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  font-size: 13px;
  border-bottom: 1px solid #d43c33;
}

.searchItem {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
}

.icon {
  padding: 3px;
  margin-left: 10px;
}
.searchItem .content {
  flex: 1;
  margin-left: 10px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
</style>